<template>
	<view class="page">
		<view class="person-head">
			<view class="person-head-box">
				<view class="person-head-nickname">{{ userInfo.name }}</view>
				<view class="person-head-username">{{ userInfo.loginName }}</view>
			</view>
			<!-- <view class="cu-avatar"></view> -->
		</view>
		<view class="bg-white">
			<text class="user-tip">信息</text>
			<view class="user-laber">
				<view>公司</view>
				<view>{{ userInfo.companyDTO && userInfo.companyDTO.name }}</view>
			</view>
			<view class="user-laber">
				<view>部门</view>
				<view>{{ userInfo.officeDTO && userInfo.officeDTO.name }}</view>
			</view>
			<view class="user-laber">
				<view>岗位</view>
				<view>{{ userInfo.post && userInfo.post.name }}</view>
			</view>
			<view class="user-laber">
				<view>角色</view>
				<view>{{ userInfo.roleNames }}</view>
			</view>
			<view class="user-laber">
				<view>联系电话</view>
				<view>{{ userInfo.phone }}</view>
			</view>
			<view class="user-laber">
				<view>邮箱</view>
				<view>{{ userInfo.email }}</view>
			</view>
			<view class="user-laber" @click="openUrl">
				<view>检查更新</view>
			</view>
		</view>
		
		<view class="bg-white">
			<text class="user-tip">操作</text>
			<view class="padding-xl">
				<button @click="outlogin"> 退出登录 </button>
			</view>
		</view>
	</view>


</template>

<script>
	import loginService from "../../../api/auth/loginService"
	export default {
		name: "person",
		data() {
			return {
				userInfo: {},
			}
		},
		mounted() {
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
		},
		methods: {
			outlogin() {
				uni.showLoading({
					title: '退出中...'
				});
				loginService.logout().then((data)=>{
					uni.removeStorageSync("IP-service");
					uni.hideLoading();
					uni.reLaunch({
						url: '/pages/login/login'
					});
	  		}).catch(e => {
					uni.hideLoading();
					uni.reLaunch({
						url: '/pages/login/login'
					});
				})
			},
			openUrl() {
				plus.runtime.openURL('http://www.tengwangyun.cn:801/app.apk')
			}
		}
	}
</script>

<style scoped>
.page {
	background-color: #f8f8f8;
	height: 100vh;
}
.person-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 150px;
	padding:0 20px;
	/* background: linear-gradient(to right, #365fff, #36bbff); */
}

.person-head-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-left: 10px;
}

.person-head-nickname {
	font-size: 48rpx;
	font-weight: 500;
	color: rgb(17, 17, 17);
	font-family: 'ShanHaiJiangNanLi45W';
	margin-bottom: 10rpx;
}

.person-head-username {
	font-size: 14px;
	font-weight: 500;
	color: rgb(17, 17, 17);
	font-family: 'ShanHaiJiangNanLi45W';
}

.cu-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;
	background-color:  rgb(17, 17, 17);;
}

.bg-white {
	width: 650rpx;
	margin: 0 auto;
	padding: 30rpx;
	background-color: white;
	margin-bottom: 30rpx;
}

.user-laber {
	/* width: 620rpx; */
	color: #606266;
	font-size: 28rpx;
	margin: 0 auto;
	height: 80rpx;
	border-bottom: 2rpx solid #f1f1f1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.padding-xl {
	/* margin-top: 20rpx; */
}

.user-tip {
	color: rgb(17, 17, 17);
	font-family: 'ShanHaiJiangNanLi45W';
	margin-bottom: 10rpx;
	display: inline-block;
}

.padding-xl	button {
	/* margin-top: 40rpx; */
	width: 100%;
	height: 80rpx;
	background: rgb(17, 17, 17);
	border-radius: 10rpx;
	color: white;
	line-height: 80rpx;
	font-size: 24rpx
}
</style>